<template>
  <div class="orderList-container">
    <byui-query-form>
      <el-form ref="form" :model="queryForm" label-width="80px">
        <el-row :gutter="20" type="flex">
          <div class="list-margin-lr" v-if="checkPermission(['admin'])">
            <el-form-item label="联盟账号">
              <el-select v-model="unionForAdmin" placeholder="请选择">
                <el-option label="全部账号" value=""></el-option>
                <el-option :label="name" :value="name" v-for="(name, index) in unionList" :key="index"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="list-margin-lr">
            <el-select v-model="queryForm.timeType" style="margin-right: -1px;width: 120px;">
              <el-option label="创建时间" value="1"></el-option>
              <el-option label="点击时间" value="2"></el-option>
              <el-option label="付款时间" value="3"></el-option>
              <el-option label="结算时间" value="4"></el-option>
            </el-select>
            <el-date-picker
              v-model="time"
              type="datetimerange"
              align="right"
              unlink-panels
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              :picker-options="pickerOptions"
              style="margin-left: -1px;"
            ></el-date-picker>
          </div>
          <div class="list-margin-lr"><el-input placeholder="请输入商品名称" v-model="queryForm.q" class="input-with-select"></el-input></div>
          <div class="list-margin-lr"><el-button type="primary" @click.native="handleQuery">查询</el-button></div>
        </el-row>
      </el-form>
    </byui-query-form>
    <el-table
      ref="tableSort"
      v-loading="listLoading"
      :data="list"
      :element-loading-text="elementLoadingText"
      header-row-class-name="tableHead"
      :cell-style="{ borderBottom: '0px' }"
      stripe
      @sort-change="sortChange"
    >
      <el-table-column label="" width="60">
        <!--template slot="header" slot-scope="scope">
          <el-button type="text" icon="el-icon-s-tools" @click.native="showBox=true"></el-button>
        </template-->
        <template slot-scope="scope">
          {{ scope.$index + 1 + (queryForm.pageNo - 1) * queryForm.pageSize }}
        </template>
      </el-table-column>
      <el-table-column label="商品" prop="title" width="365">
        <template slot-scope="scope">
          <el-row type="flex" class="row-bg" @click.native="goUrl(scope.row.item_id)" style="cursor:pointer">
            <div style="width: 50px; height: 50px; margin: auto;"><el-image :src="scope.row.item_img" style="width: 50px; height: 50px;"></el-image></div>
            <div style="margin-left: 10px;">
              <h4 style="max-width: 245px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-weight: 500;color: rgba(0, 0, 0, 0.85);">{{ scope.row.item_title }}</h4>
              <div style="font-size: 12px;text-align: left;">店铺：{{ scope.row.seller_shop_title }}</div>
            </div>
          </el-row>
        </template>
      </el-table-column>
      <el-table-column label="全部销售额" prop="allPayPrice" sortable="custom" min-width="120">
        <template slot-scope="scope">
          <div>￥{{ scope.row.allPayPrice }}</div>
        </template>
      </el-table-column>
      <el-table-column label="有效销售额" prop="validPayPrice" sortable="custom" min-width="120">
        <template slot-scope="scope">
          <div>￥{{ scope.row.validPayPrice }}</div>
        </template>
      </el-table-column>
      <el-table-column label="退款销售额" prop="refundPayPrice" sortable="custom" min-width="120">
        <template slot-scope="scope">
          <div>￥{{ scope.row.refundPayPrice }}</div>
        </template>
      </el-table-column>
      <el-table-column label="全部佣金" prop="allCommission" sortable="custom" min-width="120">
        <template slot-scope="scope">
          <div>￥{{ scope.row.allCommission }}</div>
        </template>
      </el-table-column>
      <el-table-column label="有效佣金" prop="validCommission" sortable="custom" min-width="120">
        <template slot-scope="scope">
          <div>￥{{ scope.row.validCommission }}</div>
        </template>
      </el-table-column>
      <el-table-column label="退款佣金" prop="refundCommission" sortable="custom" min-width="120">
        <template slot-scope="scope">
          <div>￥{{ scope.row.refundCommission }}</div>
        </template>
      </el-table-column>
      <el-table-column label="全部订单量" prop="allOrderTotal" sortable="custom" min-width="120">
        <template slot-scope="scope">
          <div>{{ scope.row.allOrderTotal }}</div>
        </template>
      </el-table-column>
      <el-table-column label="有效订单量" prop="validOrderTotal" sortable="custom" min-width="120">
        <template slot-scope="scope">
          <div>{{ scope.row.validOrderTotal }}</div>
        </template>
      </el-table-column>
      <el-table-column label="退款量" prop="refundOrderTotal" sortable="custom" min-width="120">
        <template slot-scope="scope">
          <div>{{ scope.row.refundOrderRate }}%</div>
        </template>
      </el-table-column>
      <el-table-column label="未付款量" prop="unpaid" sortable="custom" min-width="120">
        <template slot-scope="scope">
          <div>{{ scope.row.unpaidRate }} %</div>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      :background="background"
      :current-page="queryForm.pageNo"
      :layout="layout"
      :page-size="queryForm.pageSize"
      :total="total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
    ></el-pagination>
  </div>
</template>

<script>
import checkPermission from '@/utils/permission';
import { listUnionName,listGoodsRanking } from '@/api/index';
export default {
  name: 'OrderList',
  components: {},
  filters: {},
  data() {
    return {
      showBox:false,
      showList:[{show:true,name:''}],
      pickerOptions: {
        shortcuts: [
          {
            text: '今天',
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setHours(0);
              start.setMinutes(0);
              start.setSeconds(0);
              start.setMilliseconds(0);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '昨天',
            onClick(picker) {
              const today = new Date();
              today.setHours(0, 0, 0, 0);
              const start = new Date(today.getTime() - 86400000);
              const end = new Date(today.getTime() - 1);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '近3天',
            onClick(picker) {
              const today = new Date();
              today.setHours(0, 0, 0, 0);
              const start = new Date(today.getTime() - 86400000 * 3);
              const end = new Date(today.getTime() - 1);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '近7天',
            onClick(picker) {
              const today = new Date();
              today.setHours(0, 0, 0, 0);
              const start = new Date(today.getTime() - 86400000 * 7);
              const end = new Date(today.getTime() - 1);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '近30天',
            onClick(picker) {
              const today = new Date();
              today.setHours(0, 0, 0, 0);
              const start = new Date(today.getTime() - 86400000 * 30);
              const end = new Date(today.getTime() - 1);
              picker.$emit('pick', [start, end]);
            }
          },
          {
            text: '近90天',
            onClick(picker) {
              const today = new Date();
              today.setHours(0, 0, 0, 0);
              const start = new Date(today.getTime() - 86400000 * 90);
              const end = new Date(today.getTime() - 1);
              picker.$emit('pick', [start, end]);
            }
          }
        ]
      },
      unionList: [],
      list: [],
      listLoading: false,
      layout: 'total, sizes, prev, pager, next, jumper',
      total: 0,
      background: true,
      elementLoadingText: '正在加载...',
      queryForm: {
        pageNo: 1,
        pageSize: 20,
        timeType: '1',
        q: '',
        startTime: '',
        endTime: '',
        sortName: 'allPayPrice',
        sortType: 'DESC'
      },
      unionForAdmin: '',
      time: []
    };
  },
  created() {
    if (this.checkPermission(['admin'])) {
      listUnionName({}).then(res => {
        if (res.code && res.code === 200) {
          this.unionList = res.data;
          if (res.data.length == 0) {
            this.$baseAlert('必须先添加淘宝账号', '请先添加账号', () => {
              this.$router.push('/admin/unionTaobao');
            });
          }
        }
      });
    }
    this.fetchData();
  },
  beforeDestroy() {},
  mounted() {},
  methods: {
    sortChange(e) {
      this.queryForm.pageNo = 1;
      this.queryForm.sortName = e.prop;
      this.queryForm.sortType = e.order == 'descending' ? 'DESC' : 'ASC';
      this.fetchData();
    },
    goUrl(id) {
      window.open('https://detail.tmall.com/item.htm?id=' + id);
    },
    handleSizeChange(val) {
      this.queryForm.pageSize = val;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.queryForm.pageNo = val;
      this.fetchData();
    },
    handleQuery() {
      let req = this.queryForm;
      if (this.checkPermission(['admin'])) {
        req.name = this.unionForAdmin;
      }
      if (this.time && this.time.length == 2) {
        req.startTime = dateFormat('YYYY-mm-dd HH:MM:SS', this.time[0]);
        req.endTime = dateFormat('YYYY-mm-dd HH:MM:SS', this.time[1]);
      } else {
        req.startTime = '';
        req.endTime = '';
      }
      this.queryForm.pageNo = 1;
      this.fetchData();
    },
    fetchData() {
      listGoodsRanking(this.queryForm).then(res => {
        this.list = res.data;
        const imageList = [];
        res.data.forEach((item, index) => {
          imageList.push(item.img);
        });
        this.imageList = imageList;
        this.total = res.totalCount;
        setTimeout(() => {
          this.listLoading = false;
        }, 500);
      });
    },
    checkPermission
  }
};
function dateFormat(fmt, date) {
  let ret;
  const opt = {
    'Y+': date.getFullYear().toString(), // 年
    'm+': (date.getMonth() + 1).toString(), // 月
    'd+': date.getDate().toString(), // 日
    'H+': date.getHours().toString(), // 时
    'M+': date.getMinutes().toString(), // 分
    'S+': date.getSeconds().toString() // 秒
  };
  for (let k in opt) {
    ret = new RegExp('(' + k + ')').exec(fmt);
    if (ret) {
      fmt = fmt.replace(ret[1], ret[1].length == 1 ? opt[k] : opt[k].padStart(ret[1].length, '0'));
    }
  }
  return fmt;
}
</script>

<style lang="scss">
.tableHead {
  height: 50px;
}
.goods_wrapper {
  position: relative;
  width: 90px;
  height: 90px;
  margin-top: 5px;
  padding-right: 5px;
}
.list-margin-lr {
  margin: 0 10px;
}
.list-title {
  color: #444;
}
.el-table::before {
  height: 0;
}
.total-money-title {
  font-size: 12px;
  color: #999;
  line-height: 20px;
}
.total-money-number {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
  color: #2361ff;
  line-height: 36px;
}
.total-money-tip {
  font-size: 12px;
  font-weight: bold;
  color: rgb(35, 97, 255);
  margin-left: 5px;
}
</style>
